<!-- 库存管理-物料管理-物料/产品管理 -->
<template>
  <pageHeader
    :title="title"
    :breadCrumb="breadCrumb"
    :show-back="true"
  ></pageHeader>
  <div class="management-content">
    <leftList class="leftList"></leftList>
    <mainList class="mainLeft"></mainList>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive } from 'vue';
  import { useGlobalParametersStore } from '@/store';
  import leftList from './components/category-left-list/index.vue';
  import mainList from './components/category-main-list/index.vue';

  const store = useGlobalParametersStore();
  console.log(store.getWindoSize());
  console.log('宽度', document.documentElement.clientWidth);
  console.log(
    '高度',
    document.documentElement.clientHeight,
    document.body.clientHeight
  );

  const title: string = '物料/产品管理';
  const breadCrumb: string[] = ['库存管理', '物料管理', '物料/产品管理'];
</script>

<style scoped lang="less">
  .management-content {
    padding: 10px 10px 10px 20px;
    display: flex;
    height: 100%;
    .leftList {
      margin-right: 20px;
    }
    .mainLeft {
      height: 100%;
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: auto;
    }
  }
</style>
